<script setup>
import { ref, computed } from 'vue'
import Button from '@/components/Button.vue'
import BiTeBi from '@/assets/svg/BiTeBi.vue'
import { message } from 'ant-design-vue'
import { rechargeApi } from '@/api'
import { useUserStore, useCommonStore } from '@/stores'
const activeIndex = ref(0)
const activeMoney = ref(10)
const payList = computed(() => useCommonStore().payList)

const switchMoney = (index) => {
  activeIndex.value = index
  activeMoney.value = list[index]
  textareaValue.value = null
}

const textareaValue = ref(null)
const list = [10, 30, 100, 300, 1000]

const recharge = () => {
  const { getUserInfo, token } = useUserStore()
  if (!token) return message.warning('Please login first')
  if (!activeMoney.value) return message.warning('Please select topup amount')
  rechargeApi({
    money: activeMoney.value,
    pay_type: 'usdt',
    type: 'integral',
  }).then(() => {
    getUserInfo()
    message.success('Topup success')
  })
}
</script>
<template>
  <div class="bg-gray-50">
    <div class="max-w-[1200px] mx-auto">
      <div class="text-[#243139bf] p-3 leading-loose">Yesgamers <RightOutlined /> Credits</div>
      <div class="border border-gray-200 bg-white p-8">
        <div class="text-center flex flex-col gap-4">
          <div class="text-4xl max-[750px]:text-2xl">Topup Credits via Crypto</div>
          <div class="text-gray-500">Buy Credits with Crypto and get extra Credits for Free</div>
          <div class="h-0.5 bg-amber-500 w-[10%] mx-auto"></div>
        </div>
        <div class="pt-12 leading-loose flex flex-col gap-5">
          <div class="text-3xl max-[750px]:text-2xl">Get Up To 20% Extra Credits</div>
          <div>
            The more you Top Up, the more extra credits will be added to your account. We reward
            your loyalty and commitment with free credits.
          </div>
          <div>
            Example: Top Up $1,000 USD and qualify for 20% extra credits, so you will get $1,200
            worth of credits ($200 free credit to spend).
          </div>
          <div>Check the table to see how much extra credits you’ll get for each topup.</div>
        </div>
      </div>
      <div class="pt-12 pb-12">
        <div class="w-[60%] mx-auto p-12 bg-white rounded-2xl max-[750px]:w-[100%] max-[750px]:p-3">
          <div class="flex flex-col gap-5">
            <div class="text-3xl max-[750px]:text-2xl mb-5">Enter Topup Amount</div>
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-5">
              <div
                class="bg-[#eee] p-5 rounded-xl text-2xl font-bold"
                v-for="(item, index) in list"
                :key="item"
                :class="{ 'bg-[#f9a044] text-white': activeIndex === index }"
                @click="switchMoney(index)"
              >
                $ {{ item }}
              </div>
              <textarea
                class="bg-[#eee] p-5 rounded-xl text-2xl font-bold resize-none outline-0 h-18"
                v-model="textareaValue"
                placeholder="Custom"
                security="1"
                @focus="switchMoney"
                @input="activeMoney = textareaValue"
              />
              <!-- <div class="bg-[#eee] rounded-xl pl-5 flex gap-2 items-center text-2xl font-bold">
                <span>$</span>
                <a-input-number
                  v-model:value="value"
                  :min="1"
                  placeholder="$ 10"
                  :bordered="false"
                />
              </div> -->
            </div>
            <div class="text-xl flex items-end gap-1">
              <span class="pr-1">Amount to be paid:</span>
              <span class="font-bold text-3xl text-[#f40]">
                {{ activeMoney ? activeMoney : 0 }}
              </span>
              <span>$</span>
            </div>
            <div class="mt-5">
              <Button bg="#f9a044" class="w-full h-12 font-bold" @click="recharge">
                Topup Credits
              </Button>
            </div>
            <div class="text-[12px] text-center max-[750px]:text-[10px]">
              Buy Credits with Crypto – Get extra Credits for Free
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white p-5" v-if="payList.length">
      <div class="max-w-[1200px] mx-auto flex flex-wrap gap-5 justify-center">
        <img :src="item.img" alt="" class="h-15" v-for="item in payList" :key="'icon' + item.id" />
      </div>
    </div>
    <div class="max-w-[1200px] mx-auto pt-12 pb-12">
      <div class="grid grid-cols-2 gap-5 max-[750px]:grid-cols-1">
        <div class="border border-gray-200 bg-white p-5" v-for="item in 2" :key="item + 'grid'">
          <div class="flex flex-col gap-5 items-center justify-center p-4">
            <div
              class="bg-gray-700 text-white rounded-full size-20 flex items-center justify-center"
            >
              图标
            </div>
            <div class="text-3xl max-[750px]:text-xl">Find D2R Items</div>
            <div class="h-0.5 bg-amber-500 w-[20%] mx-auto"></div>
          </div>
          <div class="text-gray-500 mt-3 leading-loose text-xs columns-2">
            Looking for a specific Item? Don’t want to spend hours playing till you find it? Pay for
            other Player’s time they needed to find that item for you instead of grinding yourself.
            Apply to Join our Private P2P Player Network so you can help other players too.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.ant-input-number-input {
  font-size: 20px !important;
  height: 44px !important;
  background-color: #f5f5f5 !important;
}
</style>
